<template>
  <div class="fold-base" @click="toggleClick">

    <img src="../../assets/icon/fold.svg" class="fold" v-if="isActive">
    <img src="../../assets/icon/unfold.svg" class="fold" v-else>
  </div>
</template>

<script setup>
  defineProps({
    isActive: {
      type: Boolean,
      default: false
    }
  })

  const emit = defineEmits()
  const toggleClick = () => {
    emit('toggleClick');
  }
</script>

<style scoped>
  .hamburger {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
  }

  .fold-base {
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fold {
    width: 21px;
    height: 17px;
  }

  .hamburger.is-active {
    transform: rotate(180deg);
  }
</style>